<template>
  <div>
    <div class="card-article" style="margin-bottom: 10px;padding: 0 10px">
      <div style="padding: 10px;width: 60%">
        <input v-model="data.name" class="class-input" placeholder="作者"/>
        <input v-model="data.username" class="class-input" placeholder="账户名"/>
      </div>
      <div style="padding: 10px 12px;display: flex;align-content: flex-end">
        <button class="button-global" @click="load">查询</button>
        <button @click="reset" class="button-global" style="margin-left: 10px">刷新</button>
        <button class="button-global" style="margin-left: 10px " @click="handleAdd">撰写</button>
      </div>
    </div>
    <!--    弹窗的内容-->
    <div class="popup" id="popup">
      <div class="popup-content">
        <div class="close-btn rotate-xx" @click="closePopup()"><i></i> </div>
        <div class="popup-title">
          <h2>{{ showMassage.form.title }}</h2>
        </div>
        <div class="popup-p">
          <p>{{ showMassage.form.content }}</p>
        </div>
      </div>
    </div>
<!--------->
    <div class="card-list" style="margin-bottom: 10px;">
      <slot :item="item">
        <div v-for="item in data.tableData" :key="item.id" class="list-card-self" @click="openPopup(item)">
          <div>
            <h2>{{ item.title }}</h2>
            <div class="content-list">
              <p>{{ item.content }}</p>
            </div>
          </div>
          <div class="card-button-bar">
            <div>
              <p>作者: {{ item.name }}</p>
              <p>{{ item.time }}</p>
            </div>
          </div>
        </div>
      </slot>
    </div>
    <div class="buttom-card">
      <el-pagination v-model:current-page="data.pageNum" v-model:page-size="data.pageSize"
                     @current-change="handleCurrentChange"
                     layout="prev, pager, next" :total="data.total"
      />
    </div>

    <el-dialog v-model="data.formVisible" title="添加信息" width="40%">
      <el-form :model="data.form" :rules="rules" ref="formRef" label-width="100px" label-position="right">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="data.form.title" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input
              v-model="data.form.content"
              :autosize="{ minRows: 1, maxRows: 10 }"
              type="textarea"
          />
        </el-form-item>
        <span style="margin-left: 20px;">注：标题限制30字内，正文内容8000字内</span>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.formVisible=false">关闭</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {Search} from '@element-plus/icons-vue'
import request from "@/utils/request";
import router from "../../router";
import {ElMessage, ElMessageBox} from "element-plus";

const user = JSON.parse(localStorage.getItem("student-user"))
const formRef = ref();
const handleCurrentChange = () => {
  load()
}
let showMassage = reactive({
  form: {},
})

const data = reactive({
  name: '',
  number: '',
  username: '',
  tableData: [],
  total: 0,
  pageNum: 1, //当前的页码
  pageSize: 10, // 每页个数
  formVisible: false,
  form: {}
})

const load = () => {
  request.get("/article/select", {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      name: data.name,
      username: data.username,
    }
  }).then(res => {
    data.tableData = res.data?.list || []
    data.total = res.data?.total || 0
  })
}
const reset = () => {
  data.name = ''
  data.number = ''
  data.teacher = ''
  load()
}
const handleAdd = () => {
  data.form = {}
  data.formVisible = true
}
const rules = reactive({
  name: [
    {required: true, message: '请输入姓名', trigger: 'blur'},
  ],
  title: [
    {required: true, message: '请输入标题', trigger: 'blur'},
  ],
  content: [
    {required: true, message: '请输入内容', trigger: 'blur'},
  ],
})
const save = () => {
  formRef.value.validate((valid) => {

    data.form.name = user.name;
    const now = new Date();
    data.form.time = now.toLocaleString();

    data.form.username = user.username;
    if (valid) {
      request.request({
        url: data.form.id ? '/article/update' : '/article/add',
        method: data.form.id ? 'PUT' : 'POST',
        data: data.form
      }).then(res => {
        if (res.code === '200') {
          load()
          data.formVisible = false
          ElMessage.success('操作成功')
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}

const openPopup = (item) => {
  document.getElementById("popup").style.display = "block";
  showMassage.form = item
}
const closePopup = () => {
  document.getElementById("popup").style.display = "none";
}
load()
</script>


<style scope>
.card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-radius: 5px;
  max-width: 94%;
  margin: 0 auto;
  margin-bottom: 10px;
  padding: 10px 50px;
}

.card-list h2 {
  margin: 10px 0 0 0;
  font-size: 26px;
  height: 40px;
  overflow: hidden;
}

.content-list {
  padding: 0px 20px;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 14;
  -webkit-box-orient: vertical;
  overflow: hidden;
  border-top: 1px solid #c5c5c5;
}

.content-list p {
  font-family: 黑体;

}

.list-card-self {
  color: white;
  width: 400px;
  height: 400px;
  display: flex;
  box-shadow: 0 0 5px #ffffff4f;
  background-color: rgba(255, 255, 255, 0.35);
  margin: 10px;
  box-sizing: border-box;
  margin: 25px 12px;
  padding: 0 10px;
  justify-content: space-between;
  flex-direction: column;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  transition: transform 0.5s;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
.list-card-self:hover{
  z-index: 1;
  transform: scale(1.1);
}
.buttom-card {
  margin: 0 auto;
  margin-bottom: 30px;
  width: 0;
  min-width: 850px;
  max-width: 1500px;
  display: flex;
  align-items: center;
  align-content: space-between;
  background-color: transparent;
  border-radius: 25px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  flex-wrap: wrap;
  box-shadow: 0 0 5px white;
}

.card-button-bar {
  font: 14px/1 Arial, sans-serif;
  color: #d4d4d4;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid #c5c5c5;
  height: 65px;
}

.class-input {
  border: none;
  height: 30px;
  background-color: transparent;
  width: 40%;
  border-radius: 15px;
  box-shadow: 0 0 5px #ffffff;
  margin-right: 8px;
}

.class-input::placeholder {
  padding-left: 10px;
  color: rgba(240, 249, 255, 0.47);
  font-size: 14px;
}

.class-input:focus {
  outline: none;
  padding-left: 10px;
  border-color: #03a9f4;
  box-shadow: 0 0 10px #5ccaff;
  color: white;
  font-family: 黑体;
  font-size: 16px;
}

.card-article {
  margin: 7px auto;
  width: 50%;
  height: 80px;
  min-width: 850px;
  max-width: 1500px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-radius: 25px;
  padding: 0px 40px;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 6px white;
}

/*针对element的修改*/
.el-dialog {
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  color: white;
}

.el-table__row {
  background-color: transparent !important;
  color: white;
}

.el-table {
  background-color: transparent !important;
  --el-table-row-hover-bg-color: rgba(150, 141, 141, 0.21) !important;
}

.el-table__header-wrapper {

  background-color: transparent !important;
  --el-table-header-bg-color: transparent !important;
}

.el-table tr {
  background-color: transparent;
}

.el-pagination {
  --el-pagination-bg-color: #fff9f900;
  --el-pagination-button-disabled-bg-color: #00000000;
  --el-text-color-primary: #ffffff;
  --el-pagination-button-disabled-color: #ffffff;
}

.el-table thead {
  color: #ffffff;
}

/*------------弹窗*/
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
  z-index: 9999;
}

.popup-content {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 500px;
  min-width: 800px;
  transform: translate(-50%, -50%);
  background-color: transparent;
  border-radius: 10px;
  padding: 20px;
  max-width: 80%;
  max-height: 80%;
  overflow: auto;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.popup-title {
  font-size: 26px;
}

.popup-p {
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  font-size: 20px;
}

.rotate-xx i{
  background: url("http://localhost:8080/public/chahao.svg")50%/contain no-repeat;
  display: block;
  height: 30px;
  transform-origin: 50% 50%;
  transition: all .4s;
  width: 30px
}
.rotate-xx:hover i{
  transform: rotate(180deg);
}

</style>